.gearArea {font-size: .26rem; background-color: rgba(0, 0, 0, 0.2); display: block; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 9900; overflow: hidden; -webkit-animation-fill-mode: both; animation-fill-mode: both }
.area_ctrl { vertical-align: middle; background-color: #d5d8df; color: #000; margin: 0; height: auto; width: 100%; position: absolute; left: 0; bottom: 0; z-index: 9901; overflow: hidden; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) }
.slideInUp { -webkit-animation: slideInUp .3s; animation: slideInUp .3s; }
 @-webkit-keyframes slideInUp {
 from {
 -webkit-transform: translate3d(0, 100%, 0);
 transform: translate3d(0, 100%, 0)
}
 to {
 -webkit-transform: translate3d(0, 0, 0);
 transform: translate3d(0, 0, 0)
}
}
 @keyframes slideInUp {
 from {
 -webkit-transform: translate3d(0, 100%, 0);
 transform: translate3d(0, 100%, 0)
}
 to {
 -webkit-transform: translate3d(0, 0, 0);
 transform: translate3d(0, 0, 0)
}
}
.area_roll { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; width: 100%; height: auto; overflow: hidden; background-color: transparent; -webkit-mask: -webkit-gradient(linear, 0% 50%, 0% 100%, from(#debb47), to(rgba(36, 142, 36, 0))); -webkit-mask: -webkit-linear-gradient(top, #debb47 50%, rgba(36, 142, 36, 0)) }
.area_roll>div { font-size: 1.6em; height: 10em; float: left; background-color: transparent; position: relative; overflow: hidden; -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1 }
.area_roll>div .gear { width: 100%; float: left; position: absolute; z-index: 9902; margin-top: 4em }
.area_roll_mask { -webkit-mask: -webkit-gradient(linear, 0% 40%, 0% 0%, from(#debb47), to(rgba(36, 142, 36, 0))); -webkit-mask: -webkit-linear-gradient(bottom, #debb47 50%, rgba(36, 142, 36, 0)); padding: 0 }
.area_grid { position: relative; top: 4em; width: 100%; height: 2em; margin: 0; box-sizing: border-box; z-index: 0; border-top: 1px solid #abaeb5; border-bottom: 1px solid #abaeb5 }
.area_roll>div:nth-child(3) .area_grid>div { left: 42% }
.area_btn { color: #6ab42f; font-size: 1.6em; line-height: 1em; text-align: center; padding: .8em 3em }
.area_btn_box:before, .area_btn_box:after { content: ''; position: absolute; height: 1px; width: 100%; display: block; background-color: #96979b; z-index: 15; -webkit-transform: scaleY(0.33); transform: scaleY(0.33) }
.area_btn_box { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: stretch; -webkit-align-items: stretch; -ms-flex-align: stretch; align-items: stretch; background-color: #f1f2f4; position: relative }
.area_btn_box:before { left: 0; top: 0; -webkit-transform-origin: 50% 20%; transform-origin: 50% 20% }
.area_btn_box:after { left: 0; bottom: 0; -webkit-transform-origin: 50% 70%; transform-origin: 50% 70% }
.tooth { height: 2em; line-height: 2em; text-align: center; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; line-clamp: 1; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; overflow: hidden }
.giftbtn{ background:#f6ad2b !important; color:#fff;}
.giftbtn i{ font-size:.8rem; vertical-align:middle}
.pay .banner{ font-size:.6rem; line-height:2rem; text-align:center; width:100%; height:auto;}
.pay .banner img{ width:100%; height:auto; display:block;}
.pay .md-show .submit{margin:1rem 0 2.4rem 0}
